<template>
  <div class="cent">
    <alertLogin></alertLogin>
    <div class="title w clearfix">
      <div class="left">
        <p style="color: #333333;text-align: left" :us="us">精品线路推荐</p>
      </div>
      <!--<div class="right checkType" >-->
        <!--<span :class="{'check':check == 0 }" @click="saechFn(0,res)"> 全部</span>-->
        <!--<span :class="{'check':check == 1 }" @click="saechFn(1,res1)"> 班列</span>-->
        <!--<span :class="{'check':check == 2 }" @click="saechFn(2,res2)">直达</span>-->
        <!--<span :class="{'check':check ==3 }"  @click="saechFn(3,res3)">中转</span>-->
        <!--<span :class="{'check':check == 4 }" @click="saechFn(4,res4)">海铁联运</span>-->
      <!--</div>-->
    </div>
    <div class="w"  :ListData="ListData">
      <el-row  style="margin-top:20px;cursor: pointer" class="list">
        <el-col  v-for="(o, index) in tableData2" :key="o.number" class="goodes" style="">
          <el-card :body-style="{ padding: '0px' }">
            <img class="image" :src="o.imgUrl" />
            <div style="padding: 14px;" @click="goChart('searchChart',o.number)">
              <span class="cardTitle">{{o.origin}}-{{o.dest}}</span>
              <p >
                <span class="td" :class="{'transMode1':o.transMode==1,'transMode2':o.transMode==2,'transMode3':o.transMode==3,'transMode4':o.transMode==4}">
                  {{o.transMode==1?"班列":o.transMode==2?"直达":o.transMode==3?"中转":o.transMode==4?"海铁":'未知'}}</span>
              </p>
              <div class="bottomText">
                <p class="bottom ">
                  {{o.lineDes}}
                </p>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<style scoped>
  .goodes{width: 229px;margin-right: 10px;margin-bottom: 20px ;}
  .goodes:hover{box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }
  .cardTitle{line-height: 40px;font-size: 16px;font-weight: bold}
  .bottomText{height: 50px;width: 100%;padding-top: 10px}
  .checkType span{padding: 5px 10px ;font-size: 14px;font-weight: normal}
  .checkType .check{background-color: #0d71b7;color: #fff}
   .td{font-size: 12px;line-height: 20px;display: block;background-color: #c0c4cc;margin: auto;width: 40px}
  .title{font-weight: bold;color: #333333; font-size: 20px; cursor: pointer; font-family: "Helvetica Neue",  Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif}
  .title p{color: #333333}
  .cent{padding:.33rem 0px;margin:auto;width: 100%}
  .iocn img{width: .45rem;position:relative;top: .10rem}
  .imgBoxLfet .title{font-size: .16rem; position:absolute;bottom:.0rem;height: .5rem;line-height: .25rem;background-color: rgba(0,0,0,0.5);text-align: left;padding: .10rem .05rem 0px .05rem;width:3.1rem;color: #fff;}
  .imgBoxLfet  .imgBoxs img{width: 100%;height:3.2rem}
  .list  .title{ line-height: .25rem;text-align: left;overflow: hidden;font-weight: bold;font-size: .16rem;padding-bottom: 8px}
  .iocn{width: 2rem;height: .3rem;margin-left: 10px}
  .transMode1{background-color: #0ac6cc}
  .transMode2{background-color: #ccb310}
  .transMode3{background-color: #ff5555}
  .transMode4{background-color: #46aff9;}
  .time {
    font-size: 13px;
    color: #999;
  }
  .bottom {
    font-size: 14px;
    line-height: 25px;
  }
  .button {
    padding: 0;
    float: right;
  }
  .image {
    width: 100%;
    display: block;
  }
  @media only screen and (min-width: 1200px){
    .list{width: 958px;margin: auto}
  }
  @media only screen and (min-width: 1366px){
    .list{width: 1200px;margin: auto}
  }
  @media only screen and (min-width: 1440px){

  }
  @media only screen and (min-width: 1600px){

  }
  @media only screen and (min-width: 1920px){

  }
  @media only screen and (min-width: 2560px){

  }
</style>
<script>
  import setPublc from '@/components/public/set.vue'
  import HeaderPublc from '@/components/public/herderIndex.vue'
  import Public from '@/vuex/public'
  import alertLogin from '@/components/public/alertLogin.vue'
  import {mapState, mapActions} from 'vuex'
  export default {
    name: 'my-adminChart',

    data () {
      return {
        page:{page:1,pageSize:5,count:0},
        tableData1:{title:'',id:""},
        tableData2:[],
        currentDate: new Date(),
        check:0,
        user:{}
    }
    },
    methods: {
      ...mapActions({
        recommendLines: 'recommendLines',
      }),
      gonwes (id) {
        this.$router.push({ name: 'searchChart',query:{id:id}})
      },
      goChart(name,id){

        if(this.user){
          if(this.user.type == 1 && this.user.admin!=1){
            this.$router.push({ name: name,query:{id:id}})
          }else {
            this.$store.commit('updaeAlertShow', 'show')
          }
        }else {

          this.$store.commit('updaeAlertShow', 'show')
        }

      },
      // 查询
      saechFn(a,arr){
        this.check = a
        this.recommendLines(arr)
      },
      // 列表解析
      transportListFn(res){
        res = res.body.data
        this.tableData2 = []
        for(let i in res){
          // 解析城市
          var origin = Public.publicLo.getCityById(res[i].origin),
            originPort= Public.publicLo.getCityById(res[i].origin),
            customsStation = Public.publicLo.getCityById(res[i].origin),
            transitPort = Public.publicLo.getCityById(res[i].origin),
            dest =  Public.publicLo.getCityById(res[i].dest),
            departTime = '',
            duration = '';
          if(origin){origin = origin.stationCN}
          if(originPort){originPort = originPort.stationCN}
          if(customsStation){customsStation = customsStation.stationCN}
          if(transitPort){transitPort = transitPort.stationCN}
          if(dest){dest = dest.stationCN}
          if(res[i].departTime){
            departTime = Public.publicLo.timeCheng(res[i].departTime)
          }
          if(res[i].duration){
            duration = Public.publicLo.timeCheng(res[i].duration)
          }
          var pu={
            "number":res[i].number,//路线编号
            "transMode":res[i].transMode,//运输模式
            "originPort":originPort,//起始港
            "origin":origin,//起始站
            "transferStation":res[i].transferStation,//中转站
            "customsStation":customsStation,//报关站
            "transitPort":transitPort,//过境口岸
            "dest":dest,//目的站
            "departPlan":res[i].departPlan,//发车计划
            "departTime":res[i].departTime,//最早发车时间
            "duration":res[i].duration,// 线路时长
            "lcl":res[i].lcl,// 是否拼箱 0 ：n ，1：y
            imgUrl:res[i].imgUrl,
            lineDes:res[i].lineDes
          }
          this.tableData2.push(pu)
        }
      },
    },
    computed: {
      ListData: function () {
        var parm = this.recommendLinesList
        if (parm) {
          this.transportListFn(parm)
        }
        return 1
      },
      us: function () {
        var parm = this.userData
        if(parm){
          this.user = parm.data;

        }
        return 1
      },
      ...mapState([
        'recommendLinesList',
        'updateStatus',
        'language',
        'show',
        'userData'
      ])
    },
    mounted () {
      this.recommendLines({})
    },
    components: {
      HeaderPublc: HeaderPublc,
      setPublc:setPublc,
      alertLogin:alertLogin
    }
  }
</script>

